<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.5.7/css/layui.css"/>
</head>
<script src="/webjars/layui/2.5.7/layui.js"></script>
<body>

    <button class="layui-btn" id="add">添加学生</button>
    <input id="content" class="layui-input"><button id="search">搜索</button>
    <table id="demo" lay-filter="demo1"></table>
</body>

<script  id="barDemo" type="text/html">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"> 删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">查看</a>

</script>




<script>

    layui.use(['table','jquery','layer'],function(){
        var table = layui.table;
        var $ = layui.jquery;
        //引入弹出层
        var layer = layui.layer;
        //ajax 异步传输技术
        //给表格提供数据
        //给我们的按钮绑定一个点击时间

        table.on('edit(demo1)', function(obj){


            $.ajax({
                url:'/updateTeacher',
                method:'post',
                data:{id:obj.data.id,field:obj.field,value:obj.value},
                success:function(data){
                    if(data == 1){
                        layer.msg("更新成功")
                    }else{
                        layer.msg("更新失败")
                    }
                }
            })
        });

        $('#search').click(function(){

          var content=  $('#content').val();
            if(content.length == 0){
                tab.reload({
                    url:'/teacher/getAllTeacher',
                });
            }else{
                $.ajax({
                    url:'/selectTeacherByUsername',
                    data:{username:$('#content').val()},
                    success:function(data){
                        tab.reload({
                            url:'',
                            data:data
                        })
                    }
                })
            }

        })

        $('#add').click(function(){
            layer.open({
                type: 2,
                area:['1000px','500px'],
                content: '/index' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        })
       var tab= table.render({
            elem:'#demo',
            url:'/teacher/getAllTeacher',
            page:true,
           limits:[3,5,10,20,23,15],
            cols:[
                [
                    {field:'id',title:'id'},
                    {field:'username',title:'用户名',edit: 'text'},
                    {field:'password',title:'密码',edit: 'text'},
                    {toolbar: '#barDemo'},
                    {toolbar: '#img'}
                ]
            ]



        })
        //监听
        table.on('tool(demo1)', function(obj){

            console.log(obj);

            if(obj.event == 'edit'){
                layer.open({
                    type:2,
                    area:['1000px','500px'],
                    content:'/editTeacher?id='+obj.data.id
                })
            }
            if(obj.event== 'detail'){
                $.ajax({
                    url:'/teacher/deleteTeacherById',
                    data:{id:obj.data.id},
                    //success代表向服务器请求成功以后执行的方法
                    success:function(data){
                        if(data == 1){
                            alert("删除成功");
                            //让我们的数据表格重新加载数据
                            tab.reload();
                        }else{
                            alert("删除失败")
                        }
                    },error:function(){
                        alert("向服务器请求失败")
                    }
                })
            }


        });


    })


</script>
</html>